<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<link href="css/public/timePicker.css"  rel="stylesheet" type="text/css"/>
        <head>
        <meta charset="UTF-8">
        <title>时间插件和日期插件</title>
         <script type="text/javascript" src="js/index/jquery-2.1.3.min.js"></script>
        <script type="text/javascript" src="js/index/jquery-timepicker.js"></script>
        <script type="text/javascript" src="js/index/My97DatePicker/WdatePicker.js"></script>
        <style type="text/css">
           .hezi input{
                width: 200px;
                height: 30px;
                margin-bottom: 15px;
                border-color: #F2F3F5 1p;
            }
           .hezi span{
                width: 80px;
                height: 30px;
                margin-right: 8px;
            }
            .hezi{
                border: 1px solid #F2F3F5;
                margin-left: 10px;
                padding-left:10px;
            }
            .anniu{
             width: 120px;
             height:40px;
             background:#428BDD;
             color:#fff ;
            cursor: pointer;
            float:right;
            margin-right:39%;
            margin-top:30px;
            }
            .mainbox{
    width:1350px;
    margin:0px auto;
}
#all {
    width:100%;
    margin: 0px auto;
    
}
           
        </style>
    </head>
    <body>
         <script>
            $().ready(function(e) {
              
                $("#timePicker").hunterTimePicker();
                $(".time-picker").hunterTimePicker();
            });
            $(function(){
            	//为按钮添加点击事件
            	$(".anniu").click(function(){
            		var a1 = $("#ss").val();//
            		var a2 = $("#ss2").val();
            		var a3 = $("#ss3").val();
            		var a4 = $("#ss4").val();
            		//alert(a1+""+a2+""+a3+""+a4+"aaa");
            		if(a1==""||a2==""||a3==""||a4==""){
            			alert("请全部选择时间！");
            		}else{
            			//把时间类型转换成long类型再相减
            			var starttime =  Date.parse(a1)/1000; 
                        var endtime =   Date.parse(a2)/1000;
                        var time = (endtime-starttime)/(3600*24);
                        if(time<0){
                        	alert("很抱歉，租车日期不得大于还车日期");
                        }
                       if(time==0){
                    	   time = 1;
                       }
                       alert(time);
                        var start = a3.replace(/\:/g, "");
                        var end = a4.replace(/\:/g, "");
                        var day= 0;
                        if(end-start>400){
                             day = time+1;
                             alert("还车时间超长租车时间4小时，将按1天计算");
                        }else{
                             day = time;
                        }
                        var span = $(".esinf_a-b-a-b");
                        var zu = $("#zuce");
                        //获得一天的租金
                        var zuce = $("#zuce").attr("value")*1;
                        //获得服务费
                        var fuwu = $("#fuwu").attr("value")*1;
                        //获得保险费
                        var service = 50*1;
                        var pricese = span.attr("price");
                        //获得新的总租金
                        var total = (pricese*day)+fuwu+service;
                        //alert(service);
                        
                        span.text(total+"元");
                        zu.text(pricese+"元X"+day+"天="+pricese*day+"元");
                        
                        
                        //重新为各个<span>的value赋值
                        $("#zuce").attr("value",pricese*day);
                        $("#fuwu").attr("value",fuwu);
                        $(".esinf_a-b-a-b").attr("value",total);
            		}
            		
            		
            	});
            });
            
        </script>
        <div id="all">
        <div class="mainbox">
        <div class="hezi" >
          <form action="" method="" style="float: left">
            <span>借车日期</span><input type="text" id="ss"  name="rentdate" onclick="WdatePicker({minDate:'%y-%M-%d 00:00:00'})" />
            <span>还车日期</span><input type="text" id="ss2" onclick="WdatePicker({minDate:'%y-%M-%d 00:00:00'})" />
        <br><span>借车时间</span><input style="margin-left: 2px ;" type="text" id="ss3"  
        class="time-picker" name="2" readonly style="margin: 10px 0 0 100px;">
        
         <span>还车时间</span><input type="text" 
          style="margin-left: 2px ; " id="ss4" class="time-picker" name="3" readonly style="margin: 50px 0 0 100px;">
         </form>
          <button value="选择时间" class="anniu">选择时间
         </div>
         </div>
         </div>
    </body>
        